import { renderColumns, formatTimeRange } from "./utils";
const dataTypeObject = {
  up: {
    color: "#FF0000",
    iconUrl:
      "https://img.alicdn.com/imgextra/i3/O1CN01HhJAk827EspzgYyOt_!!6000000007766-2-tps-15-20.png",
  },
  down: {
    color: "#109800",
    iconUrl:
      "https://img.alicdn.com/imgextra/i4/O1CN01HMk9AT1UqeU1aoG0M_!!6000000002569-2-tps-15-20.png",
  },
};
// 表格第一列 固定配置
export const tableConfig = {
  beforeAdPeriodData: "投放前",
  currentAdPeriodData: "投放后",
  peerAdPeriodData: "同行标杆",
};
// 比较字段
export const comparisonFields = [
  "impsCnt",
  "ipv",
  "uv",
  "leadsCnt",
  "inqCnt",
  "payOrdByrCnt",
];

const renderDataRange = (value = "-", record) => {
  const { startTime = "", endTime = "" } = record || {};
  return (
    <div className="table-dataRange-value">
      <div className="dataRange-value">{value}</div>
      <div className="dataRange-time">
        {formatTimeRange(startTime, endTime)}
      </div>
    </div>
  );
};

const renderNormalValue = (value, record, dataText) => {
  const transformDataText =
    dataText.charAt(0).toUpperCase() + dataText.slice(1);
  const resultBreachZero = record["breachZero" + transformDataText] || "";
  const resultCompare = record["compare" + transformDataText] || "";
  const renderNumberBox = (value) => {
    if (!value || isNaN(value)) {
      return null;
    }
    const valueType = value > 0 ? "up" : "down";
    return (
      <div
        className="table-number-box"
        style={{ color: dataTypeObject[valueType].color }}
      >
        <img
          className="table-number-icon"
          src={dataTypeObject[valueType].iconUrl}
          alt=""
        />
        <div className="table-number-value">{`${(value * 100).toFixed(
          2
        )}%`}</div>
      </div>
    );
  };
  if (resultBreachZero) {
    return (
      <div className="table-breach-zero-box">
        {value}
        <div className="table-breach-text">破零成功</div>
      </div>
    );
  }
  if (resultCompare) {
    return (
      <div className="table-compare-value">
        {value}
        {renderNumberBox(resultCompare)}
      </div>
    );
  }
  return value;
};

export const tableColumns = [
  {
    title: "",
    dataIndex: "dataRange",
    key: "dataRange",
    width: "12%",
    align: "center",
    render: renderDataRange,
  },
  {
    title: renderColumns("展现量", "您店铺被买家看到的次数"),
    dataIndex: "impsCnt",
    key: "impsCnt",
    align: "center",
    render: (value, record) => {
      return renderNormalValue(value, record, "impsCnt");
    },
  },
  {
    title: renderColumns("浏览量", "买家浏览店铺或商品的次数"),
    dataIndex: "ipv",
    key: "ipv",
    align: "center",
    render: (value, record) => {
      return renderNormalValue(value, record, "ipv");
    },
  },
  {
    title: renderColumns("访客数", "浏览店铺或商品的买家数"),
    dataIndex: "uv",
    key: "uv",
    align: "center",
    render: (value, record) => {
      return renderNormalValue(value, record, "uv");
    },
  },
  {
    title: renderColumns("线索量", "收藏加购询盘"),
    dataIndex: "leadsCnt",
    key: "leadsCnt",
    align: "center",
    render: (value, record) => {
      return renderNormalValue(value, record, "leadsCnt");
    },
  },
  {
    title: renderColumns("询盘量", "买家旺旺询盘次数"),
    dataIndex: "inqCnt",
    key: "inqCnt",
    align: "center",
    render: (value, record) => {
      return renderNormalValue(value, record, "inqCnt");
    },
  },
  {
    title: renderColumns("买家数支付数", "买家旺旺咨询次数"),
    dataIndex: "payOrdByrCnt",
    key: "payOrdByrCnt",
    align: "center",
    render: (value, record) => {
      return renderNormalValue(value, record, "payOrdByrCnt");
    },
  },
];
// 数据源处理方法
export function formatData(data, labels, comparisonFields) {
  const result = [];

  for (let key in data[0]) {
    if (labels[key]) {
      const item = { dataRange: labels[key], dataCode: key, ...data[0][key] };

      if (key === "currentAdPeriodData") {
        const before = data[0]["beforeAdPeriodData"];
        const after = data[0][key];

        comparisonFields.forEach((field) => {
          if (before[field] === 0 && after[field] !== 0) {
            item[
              "breachZero" + field.charAt(0).toUpperCase() + field.slice(1)
            ] = true;
          } else {
            item[
              "breachZero" + field.charAt(0).toUpperCase() + field.slice(1)
            ] = false;
          }

          item["compare" + field.charAt(0).toUpperCase() + field.slice(1)] =
            (after[field] - before[field]) / after[field];
        });
      }

      result.push(item);
    }
  }

  return result;
}
